<template>
    <a-control-group
        class="a-input-number"
        :class="[formItem ? 'c-f-grow-1' : '']"
    >
        <a-input-string
            class="c-f-grow-1"
            :type="'number'"
            :color="myColor"
            :size="mySize"
            :sharp="mySharp"
            :disabled="myDisabled"
            :clearable="clearable"
            :isInner="true"
            @update:value="onInput"
            :value="displayText"
            :placeholder="placeholder"
            @focus="$emit('focus', $event)"
            @blur="$emit('blur', $event)"
        ></a-input-string>
        <template v-if="attachButtonShown">
            <a-button
                class="action c-f-shrink-0"
                :color="myColor"
                :size="mySize"
                :sharp="mySharp"
                :disabled="myDisabled"
                :square="true"
                @click="reduce"
                >-</a-button
            >
            <a-button
                class="action c-f-shrink-0"
                :color="myColor"
                :size="mySize"
                :sharp="mySharp"
                :disabled="myDisabled"
                :square="true"
                @click="add"
                >+</a-button
            >
        </template>
    </a-control-group>
</template>

<style lang="scss" scoped>
.a-input-number {
    width: 280px;
}
</style>

<script>
import AInputString from './AInputString.vue'
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import inputMixin from "../common/inputMixin"

export default {
    components: { AInputString, AButton, AControlGroup },
    mixins: [inputMixin],
    emits: ['focus', 'blur'],
    props: {
        step: {
            type: Number,
            default: 1,
        },
        value: {
            type: Number,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        placeholder: {
            type: String,
            default: null
        },
        attachButtonShown: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            inputStr: ''
        }
    },
    computed: {
        displayText() {
            if (this.value == null) {
                return this.inputStr
            }
            return this.value.toString()
        }
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        },
        add() {
            this.input((this.value ?? 0) + this.step)
        },
        reduce() {
            this.input((this.value ?? 0) - this.step)
        },
        onInput(val) {
            this.inputStr = val
            let numVal = null
            if (val !== null && val !== undefined && val !== '') {
                numVal = Number(val)
            }
            if (Number.isNaN(numVal)) {
                numVal = null
            }
            this.input(numVal)
        },
    }
}
</script>